Skip to content

Refactor ViewConfigPanel: split Page/ListView config layers, fix cross-view-type data flow propagation#716

Merged
hotlong merged 5 commits intomainfrom
copilot/refactor-viewconfigpanel-structure
Feb 22, 2026
Merged

Refactor ViewConfigPanel: split Page/ListView config layers, fix cross-view-type data flow propagation#716
hotlong merged 5 commits intomainfrom
copilot/refactor-viewconfigpanel-structure

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 22, 2026

ViewConfigPanel mixed page-level config (toolbar, navigation, shell) with list-level config (columns, appearance, data rendering), causing config changes to not propagate to non-grid view types. generateViewSchema hardcoded showSearch: false for all non-grid views, and renderListView omitted toolbar/display flags from fullSchema.

UI restructuring

  • Page Config section: label, description, viewType, showSearch, showFilters, showSort, clickIntoRecordDetails, addRecordViaForm, allowExport
  • Data/Appearance/Inline Actions sections (list-level): columns, filter, sort, groupBy, prefixField, color, rowHeight, type-specific options, editRecordsInline, addDeleteRecordsInline
  • Added section description hints (pageConfigHint, listConfigHint) across all 10 locales

Data flow fixes

Console renderListView — propagate missing properties to fullSchema:

const fullSchema: ListViewSchema = {
    ...listSchema,
    showSearch: viewDef.showSearch ?? listSchema.showSearch,
    showSort: viewDef.showSort ?? listSchema.showSort,
    showFilters: viewDef.showFilters ?? listSchema.showFilters,
    striped: viewDef.striped ?? listSchema.striped,
    bordered: viewDef.bordered ?? listSchema.bordered,
    color: viewDef.color ?? listSchema.color,
    ...(viewDef.filter?.length ? { filters: viewDef.filter } : {}),
    ...(viewDef.sort?.length ? { sort: viewDef.sort } : {}),
    // ...
};

Plugin generateViewSchema — replace hardcoded showSearch: false with activeView-driven values for all view types:

const baseProps = {
    showSearch: activeView?.showSearch ?? schema.showSearch ?? false,
    showSort: activeView?.showSort ?? schema.showSort ?? false,
    showFilters: activeView?.showFilters ?? schema.showFilters ?? false,
    striped: activeView?.striped ?? false,
    bordered: activeView?.bordered ?? false,
    color: activeView?.color,
};

Type updates

  • NamedListView: added showSearch, showSort, showFilters, striped, bordered, color
  • ListViewSchema TS interface + Zod schema: added showSearch, showSort, showFilters, color

Propagation matrix (before → after)

Property Grid Kanban/Calendar/Timeline/Gallery/Map/Gantt
showSearch/showSort/showFilters ❌ → ✅
striped/bordered/color ❌ → ✅
filter/sort ❌ → ✅

Tests

8 new tests covering section layout, type properties, Zod validation. All 433 console + 128 types + 154 plugin-view tests pass.

Original prompt

This section details on the original issue you should resolve

<issue_title>拆分与重构 ViewConfigPanel:实现页面级和 ListView 级配置分层,完善数据流与实时同步</issue_title>
<issue_description>## 背景
目前 ViewConfigPanel 混合了两类完全不同层级的配置:

  • 页面级(Page/View 级)配置:影响整个视图外壳,例如 showSearch、showFilters、showSort、label、viewType、导航行为等
  • 列表内容级(ListView 级)配置:影响底层数据渲染和数据流,例如 columns、field/appearance、filter、sort、type-specific options 等

这种混合导致了数据流分层和实时同步的混乱,许多配置项配置后并未在实际 UI 或数据上正确实时生效,PR #712 也只修复了一部分字段的向下透传。


目标

将 ViewConfigPanel 按"Page/View 配置"与"ListView 配置"进行分层,

  • 明确 UI 区块和状态数据流的分层收口
  • 并针对每一项配置补齐透传到对应消费层级(objectViewSchema、renderListView/fullSchema)的逻辑,
    便于逐项检查与 AI 自��修正。

待修正/拆分项明细(必须全部一一对应改造):

1. 分层职责梳理

  • 明确区分页面级配置项(外层 toolbar/页壳、导航等)与列表级配置项(Grid/Kanban/Timeline 等 ListView 的数据/外观/行为)
  • 拆分 UI,也可在同一文件内分区块;但每一项 onViewUpdate 应写入区分后的 state 通道

2. 页面级(Page/View)配置项

  • showSearch(toolbar 搜索框开关,objectViewSchema 级传递)
  • showFilters(toolbar filter UI 开关)
  • showSort(toolbar sort UI 开关)
  • label(视图名称)
  • description(视图描述)
  • type/viewType(Grid、Kanban、Gallery、Timeline...)
  • clickIntoRecordDetails(是否弹窗页、详情页行为)
  • addRecordViaForm(表单新增,视图外层入口)
  • allowExport(toolbar 导出)

3. 列表内容级(ListView 级)配置项

  • columns(显隐与顺序,下传 renderListView/fullSchema)
  • filter(defaultFilters,数据过滤,必须透传到 fullSchema)
  • sort(defaultSort,数据排序,必须透传到 fullSchema)
  • groupBy(group 渲染分组字段,所有类型需补齐 schema matrix)
  • prefixField(辅助字段、多数只用于 Grid/Timeline 类型)
  • color/fieldTextColor(颜色设定,影响内层渲染 schema)
  • appearance/rowHeight/wrapHeaders/showDescription/collapseAllByDefault
  • editRecordsInline、addDeleteRecordsInline(内层交互行为)
  • type-specific options(kanban: groupByField,calendar: startDateField/endDateField/titleField,map: latitudeField/longitudeField 等等)

4. 数据流/prop 透传修正

  • objectViewSchema 只关注页面级字段(外层 toolbar),不可混入内层列表专属项
  • renderListView 的 fullSchema 补充所有列表内容级可配置参数,按类型覆盖至 Grid/Kanban 等所有 viewType
  • 各类型下的 schema matrix 完善,避免遗漏(如 Timeline/groupBy,Gallery/imageField,Map/latitudeField)

5. UI/UX

  • Panel UI 采用分组显示,便于用户理解当前配置生效层级(可加分割线/标题说明)
  • 用户操作保存时,保证两级 state 按需合并持久化

6. 回归测试/CI

  • 对每一项配置改动补充对应的 e2e/单元测试
  • 修复完成后运行全部 test,通过后同步 Roadmap checklist

备注

  • 本 issue 作为全量改造 checklist,适配 AI coding agent 自动逐条批处理。
  • 建议修复后将 ViewConfigPanel 划分为 PageConfigPanel + ListViewConfigPanel 两个组件,后续便于维护和复用。

相关参考:#713、PR #712
</issue_description>

Comments on the Issue (you are @copilot in this section)


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@vercel
Copy link
Copy Markdown

vercel bot commented Feb 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
objectui Ready Ready Preview, Comment Feb 22, 2026 4:18am
objectui-demo Ready Ready Preview, Comment Feb 22, 2026 4:18am
objectui-storybook Ready Ready Preview, Comment Feb 22, 2026 4:18am

Request Review

Copilot AI and others added 2 commits February 22, 2026 04:00
Add pageConfigHint and listConfigHint translation keys to ja, de, fr, es,
ar, ru, pt, and ko locale files in the console.objectView section, matching
the existing keys in en.ts and zh.ts.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ix data flow propagation

- Reorganized ViewConfigPanel UI into Page Config (toolbar/navigation/shell) and ListView Config (data/appearance/inline actions) sections
- Moved showSearch/showFilters/showSort/clickIntoRecordDetails/addRecordViaForm/allowExport to Page section
- Added section description hints for user clarity
- Fixed Console renderListView to propagate showSearch/showSort/showFilters/striped/bordered/color/filter/sort to fullSchema
- Fixed plugin-view generateViewSchema to use activeView values instead of hardcoded showSearch:false
- Added showSearch/showSort/showFilters/striped/bordered/color to NamedListView type
- Added showSearch/showSort/showFilters/striped/bordered/color to ListViewSchema TypeScript interface and Zod schema
- Added i18n keys for section hints across all 10 locales

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot AI and others added 2 commits February 22, 2026 04:09
…date ROADMAP

- Added 4 new ViewConfigPanel tests: page section layout, section hints, list-level actions, page toggle onViewUpdate
- Added 3 type tests: NamedListView toolbar/display props, ListViewSchema props
- Added 1 Zod validation test: ListViewSchema with showSearch/showSort/showFilters/striped/bordered/color
- Updated ROADMAP.md propagation matrix (all ✅ for all view types)
- Marked P1.8.1 Phases 2-6 items as complete where applicable

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot AI changed the title [WIP] Refactor ViewConfigPanel to separate page and list view configurations Refactor ViewConfigPanel: split Page/ListView config layers, fix cross-view-type data flow propagation Feb 22, 2026
Copilot AI requested a review from hotlong February 22, 2026 04:15
@hotlong hotlong marked this pull request as ready for review February 22, 2026 05:59
Copilot AI review requested due to automatic review settings February 22, 2026 05:59
@hotlong hotlong merged commit 8750229 into main Feb 22, 2026
5 checks passed
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Refactors the Console’s ViewConfigPanel to clearly separate page-level (toolbar/shell) vs list-level (data/appearance) settings, and extends schema/type propagation so toolbar/display flags and filter/sort reach non-grid view types consistently across Console ↔ plugin-view ↔ types.

Changes:

  • Split ViewConfigPanel UI into “Page Config” vs “ListView Config” sections and added localized hint text across all locales.
  • Propagated toolbar/display flags (showSearch/showSort/showFilters, striped/bordered, color) and filter/sort into fullSchema for renderListView, and into plugin-view’s generateViewSchema.
  • Updated types + Zod schemas and added tests for the new/propagated properties.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/types/src/zod/objectql.zod.ts Extends ListViewSchema Zod validation with toolbar/display fields.
packages/types/src/objectql.ts Adds toolbar/display fields to NamedListView and ListViewSchema TS interfaces.
packages/types/src/tests/phase2-schemas.test.ts Adds Zod validation test coverage for the new ListViewSchema fields.
packages/types/src/tests/p1-spec-alignment.test.ts Adds type-level acceptance tests for NamedListView/ListViewSchema fields.
packages/plugin-view/src/ObjectView.tsx Removes non-grid hardcode and propagates activeView-driven flags into generated view schemas.
packages/i18n/src/locales/zh.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/ru.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/pt.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/ko.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/ja.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/fr.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/es.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/en.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/de.ts Adds section hint strings for the refactored panel.
packages/i18n/src/locales/ar.ts Adds section hint strings for the refactored panel.
apps/console/src/components/ViewConfigPanel.tsx Moves toolbar/navigation toggles into the Page section and adds section hints.
apps/console/src/components/ObjectView.tsx Propagates toolbar/display flags and filter/sort into fullSchema for ListView.
apps/console/src/tests/ViewConfigPanel.test.tsx Adds tests for section layout and live preview callbacks for page-level toggles.
ROADMAP.md Updates roadmap status and propagation matrix to reflect the new propagation coverage.

Comment on lines +314 to +315
...(viewDef.filter?.length ? { filters: viewDef.filter } : {}),
...(viewDef.sort?.length ? { sort: viewDef.sort } : {}),
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The conditional spreads for filters/sort only apply when viewDef.filter/viewDef.sort are non-empty. This makes it impossible to clear an existing filter/sort via live preview (an explicit empty array won’t override listSchema.filters/listSchema.sort). Consider treating undefined as “no override” but allowing an empty array to override (e.g., check Array.isArray(viewDef.filter) / Array.isArray(viewDef.sort) instead of .length).

Suggested change
...(viewDef.filter?.length ? { filters: viewDef.filter } : {}),
...(viewDef.sort?.length ? { sort: viewDef.sort } : {}),
...(Array.isArray(viewDef.filter) ? { filters: viewDef.filter } : {}),
...(Array.isArray(viewDef.sort) ? { sort: viewDef.sort } : {}),

Copilot uses AI. Check for mistakes.
Comment on lines +588 to +590
showSearch: activeView?.showSearch ?? schema.showSearch ?? false,
showSort: activeView?.showSort ?? schema.showSort ?? false,
showFilters: activeView?.showFilters ?? schema.showFilters ?? false,
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

showSearch/showSort/showFilters default to false when both activeView and schema omit them. That contradicts the ObjectViewSchema/NamedListView docs (@default true) and the registry defaults (showSearch/showFilters default to true). To preserve expected defaults, the fallback should be true (and only hide when explicitly set to false).

Suggested change
showSearch: activeView?.showSearch ?? schema.showSearch ?? false,
showSort: activeView?.showSort ?? schema.showSort ?? false,
showFilters: activeView?.showFilters ?? schema.showFilters ?? false,
showSearch: activeView?.showSearch ?? schema.showSearch ?? true,
showSort: activeView?.showSort ?? schema.showSort ?? true,
showFilters: activeView?.showFilters ?? schema.showFilters ?? true,

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

拆分与重构 ViewConfigPanel:实现页面级和 ListView 级配置分层,完善数据流与实时同步

3 participants